<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- v-model实现了两个操作
          1.为子组件的Value属性赋值
          2.监听子组件所发出的input事件 -->
        <myinput
          placeholder="输入用户名/手机号"
          v-model="user.username"
          :rules="/^(\d{5})$|^(1[35789]\d{10})$/"
          msg="请输入五位或者11位的数字"
        >
        </myinput>
        <myinput
          placeholder="密码"
          class="input"
          type="password"
          :rules="/^\S{3,16}$/"
          msg="请输入3-16位的密码"
        />
      </div>
      <p class="tips">
        没有账号？
        <a href="#/register" class="">去注册</a>
      </p>
      <mybutton @click="login" type="primay">登录</mybutton>
      <!-- <van-button type="primary">默认按钮</van-button> -->
    </div>
  </div>
</template>

<script>
import myinput from "@/components/myinput.vue";
import mybutton from "@/components/mybutton.vue";
import { login } from "@/apis/user.js";

// import { Button } from "vant";
// import "vant/lib/button/style";
export default {
  components: {
    mybutton,
    myinput,
    // "van-button": Button,
  },
  data() {
    return {
      user: {
        username: "10086",
        password: "1234",
      },
    };
  },
  methods: {
    async login() {
      console.log(this.user.username, this.user.password);
      if (
        /^(\d{5,6})$|^(1\d{10})$/.test(this.user.username) &&
        /^\S{3,16}$/.test(this.user.password)
      ) {
        let res = await login(this.user);
        // console.log(res);
        if (res.data.statusCode == 401) {
          this.$toast.fail(res.data.message);
        } else {
          this.$toast.fail("登录成功啊");
          //这里我们是需要获取到用户登录的 token值 同时本地存储
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem(
            "token_info",
            JSON.stringify(res.data.data.user)
          );
          let url = decodeURIComponent(window.location.hash.split("=")[1]);
          if (url && url != "undefined") {
            this.$router.push({ path: url });
          } else {
            this.$router.push({ path: `/personal/${res.data.data.user.id} ` });
          }
        }
      } else {
        this.$toast.fail("请输入正确的好吗？");
      }
      // await：
      // 1.可以获取当前操作的返回结果
      // 2.await可以让后续的操作等待，只是执行完当前使用await标记的方法之后才会执行后续的操作
      //await 只能刺蛾在async 函数里面的

      // .then((res) => {
      //   console.log(res);
      //   if (res.data.statusCode == 401) {
      //     this.$toast.fail(res.data.message);
      //   } else {
      //     this.$toast.fail("登录成功啊");
      //     //成功后面就是需要跳转的 个人中心的页面
      //   }
      // })
      // .catch((err) => {
      //   console.log(err);
      // });
    },
    //这里是需要做一个axios 请求的
    // getusername(data) {
    //   console.log((this.user.username = data));
    // },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>